<template>
	<view class="custom-nav-bar">
		<view class="three_text_view">
			<view class="menu_item" v-for="(item,index) in menusList" :key="item.path" @click="navigateToPage(item)"
				:class="{'selected-menu' : item.id === currentSelected}">
				{{item.pageName}}
			</view>
		</view>
		<view class="two_icons_view">
			<view class="search_view" @click="searchContent">
				<uni-icons type="search" size="25" color="#7a7a7a"></uni-icons>
			</view>
			<view class="add_friend_view" @click="addFriends">
				<image src="../static/icons/invitate_friends.png" mode="aspectFill" class="add_friends_image"></image>
			</view>
		</view>


		<!-- 点击搜索图标，弹出搜索输入框 -->
		<uni-popup ref="popup" background-color="#fff" type="top" :mask-click="false">
			<view class="popup-content">
				<view class="search_input">
					<uni-easyinput :placeholder="inputPlaceholder" v-model="inputValue" @confirm="toSearch"></uni-easyinput>
				</view>
				<view class="close_view">
					<view class="confirm_text" @click="toSearch">
						搜索
					</view>
					<view class="cancel_text" @click="closePopup">
						取消
					</view>
				</view>

			</view>
		</uni-popup>

	</view>
</template>

<script>
	import emitter from '@/common/mitt/eventBus.js';
	export default {
		data() {
			return {
				inputValue: '',
				currentSelected: 1,
				inputPlaceholder: '会话',
				menusList: [{
						id: 1,
						path: '/pages/friendsChat/chatPage/chat',
						pageName: '会话',
					},
					{
						id: 2,
						path: '/pages/friendsChat/communityGroupPage/community',
						pageName: '社群',
					},
					// {
					// 	id: 3,
					// 	path: '/pages/friendsChat/telListPage/telList',
					// 	pageName: '通讯录',
					// },
				],
			}
		},

		onLoad() {
			// 默认聊天会话页面
			this.currentSelected = 1;
		},

		methods: {
			navigateToPage(item) {
				this.currentSelected = item.id;
				this.$emit("currentSelectPageId", item.id);
			},
			// 点击搜索图标（搜索会话，搜索社群，搜索通讯录朋友）
			searchContent() {
				this.$refs.popup.open();
				if (this.currentSelected === 1) {
					this.inputPlaceholder = "搜索会话"
				} else if (this.currentSelected === 2) {
					this.inputPlaceholder = "搜索社群"
				}
				// else{
				// 	this.inputPlaceholder = "搜索朋友"
				// }
			},

			// 回车或者点击搜索
			toSearch() {
				emitter.emit('searchChatOrCommunitiesValue', this.inputValue);
				this.$refs.popup.close();
			},

			// 点击取消关闭弹窗
			closePopup() {
				this.$refs.popup.close();
			},
			
			addFriends(){
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				})
			},
		}
	};
</script>

<style scoped>
	.custom-nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		height: 120rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		width: 100%;
		padding-top: 50rpx;
	}

	.add_friends_image {
		width: 20px;
		height: 20px;
	}

	.three_text_view {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width: 60%;
		font-size: 17px;
		color: #0c312e;
	}

	.two_icons_view {
		width: 30%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}

	.selected-menu {
		color: #66596b;
		font-weight: bold;
		font-size: 20px;
	}

	.popup-content {
		height: 90vh;
		background-color: #66596b;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding-left: 50rpx;
		padding-right: 50rpx;
	}

	.close_view {
		display: flex;
		justify-content: space-between;
	}

	.confirm_text {
		font-size: 40rpx;
		color: #ffaa7f;
	}

	.cancel_text {
		font-size: 40rpx;
		color: #ffaa7f;
	}
</style>